import request from "../../../utils/request.js"
import PubSub from "pubsub-js"
import moment from "moment"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 是否播放音频
    isplay: false,
    // 选中要播放的歌曲
    song: {},
    // 路由参数传递的id参数
    id: null,
    // 当前音频播放位置
    currentTime:"00:00",
    // 音频已缓冲时间
    buffered:null, 
    // 音频总长度
    duration:null,
    // 进度条进度百分比
    percentage:0
  },

  // 点击播放音频
  handlePlay() {
    // 当请求歌曲数据还未完成时，点击播放无效
    if (!this.appInstance) return

    const { isplay,id } = this.data
    // 播放状态为播放时，点击暂停按钮，此时歌曲暂停播放
    if (isplay) {
      this.backgroundAudioManager.pause()
    }
    else {
      // 播放状态为暂停时，点击播放按钮，判断是新的歌曲还是相同的歌曲，相同的歌曲继续播放，新的歌曲重新得到一个新的audio背景音乐对象并自动播放
      if (this.appInstance.globalData.preId === id) {
        console.log("相同的歌")
        this.backgroundAudioManager.play()
      } else {
        console.log("不同的歌")
        this.backgroundAudioManager.src = this.data.src
        this.backgroundAudioManager.title = this.data.song.name
        // 点击播放键，播放歌曲与上一首不同时，播放这首歌曲，并将歌曲id保存到
        // 全局唯一的App实例中
        this.appInstance.globalData.preId = id
      }
    }
    this.setData({
      isplay: !isplay
    })
    // this.appInstance.globalData.isplay = this.data.isplay
  },

  // 点击前一页或后一页改变当前播放歌曲
  handleChangeSong(e) {
    // 发布事件传递改变的方向类型
    PubSub.publish("type", e.currentTarget.id)
  },

  // 根据接收的歌曲id请求对应的歌曲信息
  async reqGetSong() {
    const { id } = this.data
    const { songs } = await request("/song/detail", { ids: id })
    const song = songs[0]
    this.setData({
      song: {
        id: song.id,
        name: song.name,
        singer: song.ar.map(people => {
          return people.name
        }).join("，"),
        picUrl: song.al.picUrl,
        // 音频长度
        dt:song.dt
      },
      duration:moment(song.dt).format("mm:ss")
    })
    // 设置导航栏标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })
    // 根据接收的歌曲id请求对应的歌曲播放地址
    const res = await request("/song/url", { id })
    const src = res.data[0].url
    this.setData({
      src
    })
  },

  // 监听全局唯一的背景音频实例
  addEvent() {
    // 监听背景音频播放事件
    this.backgroundAudioManager.onPlay(() => {
      console.log("音频播放事件", this.appInstance.globalData.preId, this.data.id)
      this.appInstance.globalData.isplay = true     
      // 只有前一首播放的歌与准备播放的歌是同一首歌时，才执行css动画效果
      if (this.appInstance.globalData.preId === this.data.id){
        this.setData({
          isplay: true
        })
      }
    })
    // 监听背景音频暂停事件
    this.backgroundAudioManager.onPause(() => {
      this.appInstance.globalData.isplay = false
      this.setData({
        isplay: false
      })
    })
    // 监听背景音频播放事件更新事件
    this.backgroundAudioManager.onTimeUpdate(()=>{
      const {dt} = this.data.song
      let currentTime = this.backgroundAudioManager.currentTime
      let buffered = this.backgroundAudioManager.buffered
      // const {currentTime,buffered,duration} = this.backgroundAudioManager
      let percentage = currentTime * 1000 / dt * 100
      currentTime = moment(currentTime * 1000).format("mm:ss")
      buffered = moment(buffered * 1000).format("mm:ss")
      this.setData({
        currentTime,
        buffered,
        percentage
      })
    })
    // 测试用，设置初始背景音频播放时间，测试音频结束后是否自动播放下一首歌曲
    // this.backgroundAudioManager.startTime = 240

    // 监听背景音频自然播放结束事件
    this.backgroundAudioManager.onEnded(()=>{
      PubSub.publish("type", "next")
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    // 订阅推荐列表传递的要更换的歌曲id
    this.token = PubSub.subscribe("id", async (msg, data) => {
      console.log("前一首或后一首的歌曲id", data)
      this.setData({
        id: data
      })
      await this.reqGetSong()
      // this.setData({
      //   isplay:this.appInstance.globalData.isplay
      // })
      // 判断当前前台是否播放状态，若是则替换音频地址后会自动播放
      if (this.data.isplay) {
        this.backgroundAudioManager.src = this.data.src
        this.backgroundAudioManager.title = this.data.song.name
        // 歌曲更换后需要更新全局唯一App实例下的上一首播放歌曲id
        this.appInstance.globalData.preId = data
      }
      else{
      // 判断上一次播放的歌是否正在播放状态,若是播放状态需要判断本首歌是否是
      // 该首歌，若是则执行css样式，若不是这不执行
        const {isplay,preId} = this.appInstance.globalData
        console.log("前台暂停后台播放状态",isplay,preId,data)
        if(isplay && preId === data){
          // this.backgroundAudioManager.play()
          this.setData({
            isplay:true
          })
        }
      }
    })
    // 根据接收的歌曲id请求对应的歌曲信息
    // 从路由传参接收的数据是字符串类型，需要将其转变为数字类型
    const id = +options.id
    console.log("选中的歌曲id", id)
    this.setData({
      id
    })
    await this.reqGetSong()

    // 设置全局app变量preId和isplay，保存当前歌曲的id和播放状态,只有第一次进入此页面时才

    // 获得小程序全局唯一的App实例
    this.appInstance = getApp()

    // 只有从第二次开始，全局变量才保存有前一次的id和播放状态,判断是否是同一首歌，是则获取前一首歌的播放状态，不是则需要将当前状态变为暂停状态
    console.log("重新挂载",this.appInstance.globalData.preId, this.data.id)
    if (this.appInstance.globalData.preId === this.data.id) {
      console.log("加载是同一首歌",this.appInstance.globalData.isplay)
      const { isplay } = this.appInstance.globalData
      this.setData({
        isplay
      })
    }
    // if (this.appInstance.globalData.preId) {
    //   const { isplay } = this.appInstance.globalData
    //   this.setData({
    //     isplay
    //   })
    // }

    // if (this.appInstance.globalData.isplay) return
    // 判断后台正在播放时再次选择的歌曲是否与正在播放的相同
    // if(preId === id) return 
    // 创建全局唯一背景音频管理器
    this.backgroundAudioManager = wx.getBackgroundAudioManager()
    // this.backgroundAudioManager.src = this.data.src
    // this.backgroundAudioManager.title = this.data.song.name
    // if (this.appInstance.globalData.isplay) return
    // this.backgroundAudioManager.pause()

    // 挂载时监听背景音频的播放和暂停
    this.addEvent()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 每次回退时保存本首歌的id和播放状态到app全局对象中
    // this.appInstance.globalData.preId = this.data.song.id
    // this.appInstance.globalData.isplay = this.data.isplay
    // console.log("页面即将卸载",this.appInstance.globalData.isplay,this.data.isplay)
    // // 只有当前为播放状态下，才将当前歌曲id保存到全局唯一App实例中
    // if (this.data.isplay) {
    //   this.appInstance.globalData.preId = this.data.song.id
    // }
    // 每次回退时解绑事件
    PubSub.unsubscribe(this.token)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

// Page({

//   /**
//    * 页面的初始数据
//    */
//   data: {
//     // 是否播放音频
//     isplay:false,
//     // 选中要播放的歌曲
//     song:{},
//     // 路由参数传递的id参数
//     id:null
//   },

//   // 点击播放音频
//   handlePlay(){
//     if(!this.appInstance) return

     
//     const {isplay} = this.data
//     // 播放状态为播放时，点击暂停按钮，此时歌曲暂停播放
//     if(isplay){
//       this.backgroundAudioManager.pause()
//     }
//     else{
//       // 播放状态为暂停时，点击播放按钮，判断是新的歌曲还是相同的歌曲，相同的歌曲继续播放，新的歌曲重新得到一个新的audio背景音乐对象并自动播放
//       if (this.appInstance.globalData.preId === this.data.song.id){
//         console.log("相同的歌")
//         this.backgroundAudioManager.play()
//       }else{
//         console.log("不同的歌")
//         this.backgroundAudioManager.src = this.data.src
//         this.backgroundAudioManager.title = this.data.song.name
//       }
//     }
//     this.setData({
//       isplay:!isplay
//     })
//     this.appInstance.globalData.isplay = this.data.isplay
//   },

//   // 点击前一页或后一页改变当前播放歌曲
//   handleChangeSong(e){
//     // 发布事件传递改变的方向类型
//     PubSub.publish("type",e.currentTarget.id)
//   },

//   // 根据接收的歌曲id请求对应的歌曲信息
//   async reqGetSong(){
//     const {id} = this.data
//     const { songs } = await request("/song/detail", { ids: id })
//     const song = songs[0]
//     this.setData({
//       song: {
//         id: song.id,
//         name: song.name,
//         singer: song.ar.map(people => {
//           return people.name
//         }).join("，"),
//         picUrl: song.al.picUrl
//       }
//     })
//     // 设置导航栏标题
//     wx.setNavigationBarTitle({
//       title: this.data.song.name
//     })
//     // 根据接收的歌曲id请求对应的歌曲播放地址
//     const res = await request("/song/url", { id })
//     const src = res.data[0].url
//     this.setData({
//       src
//     })
//   },

//   // 监听全局唯一的背景音频实例
//   addEvent(){
//     // 监听背景音频播放事件
//     this.backgroundAudioManager.onPlay(()=>{
//       // if (this.appInstance.globalData.preId === this.data.song.id)
//       console.log("音频播放事件",this.appInstance.globalData.preId,this.data.song.id)
//       this.setData({
//         isplay:true
//       })
//     }),
//     // 监听背景音频暂停事件
//     this.backgroundAudioManager.onPause(() => {
//       this.setData({
//         isplay:false
//       })
//     })
//   },
  

//   /**
//    * 生命周期函数--监听页面加载
//    */
//   onLoad: async function (options) {
//     // 订阅推荐列表传递的要更换的歌曲id
//     this.token = PubSub.subscribe("id",async (msg,data)=>{
//       console.log("前一首或后一首的歌曲id",data)
//       this.setData({
//         id:data
//       })
//       await this.reqGetSong()
//       // 判断是否播放状态，若不是这不需要替换音频地址，替换后会自动播放
//       if(this.data.isplay){
//         this.backgroundAudioManager.src = this.data.src
//         this.backgroundAudioManager.title = this.data.song.name
//       }
//     })
//     // 根据接收的歌曲id请求对应的歌曲信息
//     const id = options.id
//     console.log("选中的歌曲id",id)
//     this.setData({
//       id
//     }) 
//     await this.reqGetSong()
    
//     // 设置全局app变量preId和isplay，保存当前歌曲的id和播放状态,只有第一次进入此页面时才
    
//     // 获得小程序全局唯一的App实例
//     this.appInstance = getApp()

//     // 只有从第二次开始，全局变量才保存有前一次的id和播放状态,判断是否是同一首歌，是则获取前一首歌的播放状态，不是则需要将当前状态变为暂停状态
//     if(this.appInstance.globalData.preId === this.data.song.id){
//       const { isplay } = this.appInstance.globalData
//       this.setData({
//         isplay
//       })
//     }
//     // if (this.appInstance.globalData.preId) {
//     //   const { isplay } = this.appInstance.globalData
//     //   this.setData({
//     //     isplay
//     //   })
//     // }
   
//     // if (this.appInstance.globalData.isplay) return
//     // 判断后台正在播放时再次选择的歌曲是否与正在播放的相同
//     // if(preId === id) return 
//     // 创建全局唯一背景音频管理器
//     this.backgroundAudioManager = wx.getBackgroundAudioManager()
//     // this.backgroundAudioManager.src = this.data.src
//     // this.backgroundAudioManager.title = this.data.song.name
//     // if (this.appInstance.globalData.isplay) return
//     // this.backgroundAudioManager.pause()

//     // 挂载时监听背景音频的播放和暂停
//     this.addEvent()
//   },

//   /**
//    * 生命周期函数--监听页面初次渲染完成
//    */
//   onReady: function () {

//   },

//   /**
//    * 生命周期函数--监听页面显示
//    */
//   onShow: function () {

//   },

//   /**
//    * 生命周期函数--监听页面隐藏
//    */
//   onHide: function () {
  
//   },

//   /**
//    * 生命周期函数--监听页面卸载
//    */
//   onUnload: function () {
//     // 每次回退时保存本首歌的id和播放状态到app全局对象中
//     this.appInstance.globalData.preId = this.data.song.id
//     this.appInstance.globalData.isplay = this.data.isplay
//     // 每次回退时解绑事件
//     PubSub.unsubscribe(this.token)
//   },

//   /**
//    * 页面相关事件处理函数--监听用户下拉动作
//    */
//   onPullDownRefresh: function () {

//   },

//   /**
//    * 页面上拉触底事件的处理函数
//    */
//   onReachBottom: function () {

//   },

//   /**
//    * 用户点击右上角分享
//    */
//   onShareAppMessage: function () {

//   }
// })